<template>
	<view class="CompanyRecruitment" @click="isPops=false">
		
		<view class="bannerConter" >
			<!-- <image class="tebLicns" :src="imgUrl+'/denglyu.png'" mode=""></image> -->
			
			<view class="conter_bs" >
				<image class="meLogos"
				@load="imageLoad" :style="{
					height:imgHeight+'rpx'
				}" mode="aspectFit" 
				:src="infoForm.company_show_logo"></image>
				<view class="borde-padd-24 flex-height-between">
					<view class="">
						<view class="im-tile"> {{infoForm.company_show_name}}</view>
						<view class="im-title">{{infoForm.company_nature_cn}} /{{infoForm.company_industry_cn}}/ {{infoForm.company_scale_cn}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="borde-padd-24">
			<!-- <view class="position-conter flex-height-between flex-line-height" @click.stop="isPops=true">
				<image class="img" :src="imgUrl+'/zhaiwei.png'" mode=""></image>
				<view class="flex-height-between cltitleweizzh">
					<view class="l">在招职位({{company_count}})</view>
					<view class="flex-line-height">
						<image class="lujing" :src="imgUrl+'/right-icon.png'" mode=""></image>
					</view>
				</view>
			</view> -->
			<!-- <view class="title flex-line-height">
				<view class="icon"></view>
				企业福利
			</view> -->
			<!-- <view class="label-conter flex-wrap">
				<view class="label-list" v-for="(item,index) in 5">年终奖111</view>
			</view> -->
			<view class="title flex-line-height" v-if="infoForm.introduction">
				<view class="icon"></view>
				企业简介
			</view>
			<!-- <view class="position-conter flex-height-between flex-line-height">
				<image class="img" :src="imgUrl+'/con-slist.png'" mode=""></image>
				<view class="flex-height-between cltitleweizzh">
					<view class="l">{{infoForm.address}}</view>
				</view>
			</view> -->
			<view class="info" v-if="infoForm.introduction" v-html="infoForm.introduction">
			</view>
			<view class="title flex-line-height">
				<view class="icon"></view>
				在招职位({{company_count}})
			</view>
			<Qiyeliebiao :company_id="id" :company_count="company_count"></QiyeLiebiao>
		</view>
	</view>
</template>

<script>
	// qiyeLiebiao.vue
	import Qiyeliebiao from "./qiyeLiebiao.vue"
	import {
		Request
	} from '@/utils/request.js'
	export default{
		components:{
			Qiyeliebiao
		},
		data(){
			return {
				id:'',
				infoForm:{},
				isPops:false,
				imgUrl:this.imgUrl,
				company_count:'',
				imgHeight:0,
			}
		},
		onLoad({company_id,company_count}) {
			this.id=company_id;
			this.company_count=company_count;
			this.cheMenTList()
		},
		methods:{
			imageLoad(e){
				const originalWidth = e.detail.width;
				    const originalHeight = e.detail.height;
				    const containerWidth = wx.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				    const ratio = originalWidth / originalHeight;
				    const imgHeight = containerWidth / ratio;
				    this.imgHeight=imgHeight;
			},
			goPages(path){
				uni.navigateBack({ delta: 1 })
				// uni.redirectTo({url: '/logon/logon/index'}) 
			},
			cheMenTList(){
				// /api/job/company
				Request("job/company",{
					company_id:this.id,
				}).then((res)=>{
					this.infoForm=res;
				})
			}
		}
	}
</script>

<style scoped>
	.CompanyRecruitment{
		background-color: #689498;
		min-height: 100vh;
	}
	.imgleftCOns{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		z-index: 999;
		left: 24rpx;
		top: 90rpx;
		transform: rotate(-180deg);
	}
	.title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: left;
		padding: 24rpx 0;
		font-style: normal;
		text-transform: none;
	}
	.title .icon{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: relative;
		margin-right: 30rpx;
	}
	.title .icon::after{
		content: '';
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		right: -18rpx;
		background: #3B5EEC;
		border-radius: 50%;
	}
	.label-conter{
		border-bottom: 1rpx solid #3C3939;
	}
	.label-list{
		height: 64rpx;
		padding: 0 24rpx;
		background: rgba(255, 255, 255, .16);
		line-height: 64rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		margin-right: 16rpx;
		margin-bottom: 24rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.meLogos{
		height: 100rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	.tcnChuChengs{
		position: fixed;
		bottom: -100%;
		transition: .5s;
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		height: 77vh;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background-color: #F7F8FA;
		left: 0;
	}
	.tcnChuChengs::after{
		content: '';
		position: absolute;
		top: 16rpx;
		width: 80rpx;
		height: 12rpx;
		left: 50%;
		transform: translate(-50%);
		background: #C0C4C7;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	.position-conter{
		width: 702rpx;
		height: 112rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: rgba(255, 255, 255, .16);
		margin-bottom: 24rpx;
	}
	.position-conter .img{
		width: 48rpx;
		height: 48rpx;
	}
	.info{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #3C3939;
	}
	
	.position-conter{
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.cltitleweizzh{
		width: 590rpx;
	}
	.cltitleweizzh .l{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.cltitleweizzh .r{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3B5EEC;
		font-style: normal;
		text-transform: none;
	}
	.cltitleweizzh .lujing{
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
	.bannerConter{
		padding-top: 40rpx;
		background: linear-gradient( 180deg, rgba(59,94,236,0.6) 0%, rgba(59,94,236,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #3C3939;
	}
	.bannerConter .conter_bs{
		width: 100%;
		height: 100%;
		
		box-sizing: border-box;
		padding-top: 50rpx 0;
	}
	.conter_bs .im-right{
		width: 148rpx;
		height: 148rpx;
	}
	.conter_bs .im-tile{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 48rpx;
		line-height: 52rpx;
		color: #FFFFFF;
		font-style: normal;
		margin-bottom: 16rpx;
		text-transform: none;
	}
		
	.conter_bs .im-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 52rpx;
		padding-bottom: 10rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.tebLicns{
		width: 100%;
		height: 90%;
	}
	
</style>